<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"?v=3.3.6" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main">
		<div class="shadow">
			<div>
				<h3>sss基础</h3>
				<p>
					Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
					拥有比其他任何CSS扩展语言更多的功能和特性。在使用css的时候我们经常会用到相同的属性
					或者是大量地方用到的数值，Sass提供了变量可以让我们用变量代替这些数值
				</p>
				<div>
					<pre>
	$highlight-color: #F90;
	$link-color: blue;
	.selected {
	  border: 1px solid $highlight-color;
	}
	a {
	  color: $link_color;
	}
	
	//编译后
	
	.selected {
	  border: 1px solid #F90;
	}	
	a {
	  color: blue;
	}			
					</pre>
				</div>
				<div>
					<h4>嵌套CSS 规则</h4>
					<pre>
	#content {
	~ article { border-top: 1px dashed #ccc }
	  article {
	    h1 { color: #333 }
	    p { margin-bottom: 1.4em }
	  }
	  aside { background-color: #EEE }
	}
	
	//编译后
	
	#content article h1 { color: #333 }
	#content ~ article { border-top: 1px dashed #ccc }
	#content article p { margin-bottom: 1.4em }
	#content aside { background-color: #EEE }			
					</pre>
				</div>
				<div>
					<h4>嵌套伪类</h4>
					<pre>
	article a {
	  color: blue;
	  &:hover { color: red }
	}
	
	//编译后
	
	article a { color: blue }
	article a:hover { color: red }			
					</pre>
				</div>
				<div>
					<h4>导入SASS文件</h4>
					<p>
						css有一个特别不常用的特性@import规则，它允许在一个css文件中导入其他css文件。
						然而，后果是只有执行到@import时，
						浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
						sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。
						这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
						另外所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
					</p>
					<pre>
	$fancybox-width: 400px !default;
	.fancybox {
	width: $fancybox-width;
	}
	//使用默认值  !default ，当其他引入的页面和此变量相同时，使用默认知后数值不会被后者覆盖		
					</pre>
				</div>
				<div>
					<h4>嵌套导入</h4>
					<pre>
	blue-theme.scss					
	aside {
	  background: blue;
	  color: white;
	}
	
	index.scss
	.blue-theme {@import "blue-theme"}
	
	//编译后
	
	.blue-theme {
	  aside {
	    background: blue;
	    color: #fff;
	  }
	}			
					</pre>
				</div>
				<div>
					<h4>混合器</h4>
					<pre>
	@mixin rounded-corners {
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	}
	
	notice {
	  background-color: green;
	  border: 2px solid #00aa00;
	  @include rounded-corners;
	}
	
	//编译后
	
	.notice {
	  background-color: green;
	  border: 2px solid #00aa00;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	}			
					</pre>
				</div>
				<div>
					<h4>给混合器传参</h4>
					<pre>
	@mixin link-colors($normal, $hover, $visited) {
	  color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
	}
	
	a {
	  @include link-colors(blue, red, green);
	}
	
	//编译后
	
	a { color: blue; }
	a:hover { color: red; }
	a:visited { color: green; }		
					</pre>
				</div>
				<div>
					<h4>选择器继承</h4>
					<pre>
	//通过选择器继承继承样式
	.error {
	  border: 1px solid red;
	  background-color: #fdd;
	}
	.seriousError {
	  @extend .error;
	  border-width: 3px;
	}
	
	//展示的效果就类似 "class='error seriousError'"一样		
					</pre>
				</div>
			</div>	
		</div>
	</div>
	<!--第三方插件-->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
	<script src="../static/js/bootstrap.min.js"></script>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/layui/layui.js" type="text/javascript"></script>

	<!--自定义-->
	<script src="../static/js/public.js" type="text/javascript" charset="utf-8"></script>
	<!--定义数据-->
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function () {
				return {
					
				}
			},
		})
	</script>
</body>

</html>